<template>
  <div class="page">
    <div id="actions" class="actions">
      <template>
        <div v-for="(item,inx) in buttonLis" :key="item.id">
          <div v-if="inx != 0" class="span" :key="'d' + item.id"></div>
          <div class="action">
            <el-button @click="buttonActions[item.id]()" style="width: 100px; height: 100%" type="success">{{ item.label
            }}</el-button>
            <div class="tip">{{ item.tip }}</div>
          </div>
        </div>

      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttonActions: {
        getbaseurl: () => {
          this.requestSwapi("getBaseUrl").then((res) => {
            console.log("getLocalBookmark", res);
          });
        },
        setbaseurl: () => {
          console.log("setbaseurl");
        },
        add: () => {
          console.log("add");
        },
        push: () => {
          console.log("push");
        },
        pull: () => {
          console.log("pull");
        },
        closeWin: () => {
          window.close();
        },
      },
      buttonLis: [
        {
          id: "getbaseurl",
          icon: "layui-icon-code-circle",
          label: "getBaseUrl",
          tip: "...",
        },
        {
          id: "setbaseurl",
          icon: "layui-icon-code-circle",
          label: "setBaseUrl",
          tip: "...",
        },
        {
          id: "add",
          icon: "layui-icon-add-circle",
          label: "新增书签",
          tip: "测试新增书签",
        },
        {
          id: "push",
          icon: "layui-icon-upload-drag",
          label: "上传收藏夹",
          tip: "推送本地书签至云端",
        },
        {
          id: "pull",
          icon: "layui-icon-download-circle",
          label: "拉取收藏夹",
          tip: "同步云端备份",
        },
        {
          id: "closeWin",
          icon: "layui-icon-prev-circle",
          label: "关闭返回",
          tip: "关闭该弹窗",
        },
      ],
    };
  },
  methods: {
    requestSwapi(action, params = {}) {
      return new Promise((resolve, reject) => {
        chrome.runtime.sendMessage({ action, params }, (res) => {
          console.log("popup=> requestSwapi callback:", res);
          resolve(res);
        });
      });
    },
  },
};
</script>
<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 350px;
  /* height: 120px; */
  padding: 8px 8px;
  /* background: green; */
  box-sizing: border-box;
}

.page {
  /* background: #BBB; */
  width: 100%;
  height: 100%;
}

.actions {
  /* background: #555; */
  width: 100%;
  display: flex;
  flex-direction: column;
}

.action {
  display: flex;
  align-items: center;
  height: 34px;
}

.tip {
  background: #eee;
  padding: 0 8px;
  font-size: 12px;
  color: #777;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  width: 700px;
  margin: 0 0 0 6px;
  border-radius: 4px;
}

.span {
  height: 6px;
}

.tree {
  /* background: goldenrod; */
  height: 536px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.button-customer-style {
  width: 110px;
  height: 30px;
}
</style>

